<!--/**
* Author: ganqz
* Date: 2022-07-27 20:41
* Desc: GoodDetail
*/
-->
<template>
  <yy-page class="mall" :linear-bg="true" hasTab>
    <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
    <yy-navbar :border="false" left-icon-color="#fff" :auto-back="true" title="特惠" title-style="color:#fff" :show-left="false"></yy-navbar>
    <!-- #endif-->
    <zm-mescroll-body ref="mescrollRef" :down="downOpt" @init="mescrollInit" @down="refresh" @up="upCallback" :up="upOpt">
      <view class="pd30">
        <cinema-choose from-home="2" />
      </view>
      <view class="mall-content">
        <home-swipe ref="homeSwipe" custom-class="mall-swiper plr20 mb30" class="mt10" :height="344" classification="2" :cinema-id="search.cinemaId || cityCinema.cinemaId" />
        <!-- 出餐状态，0待出餐，1已取餐，2已预约，3出餐中，4待取餐，5取消出餐 -->
        <view class="mall-buy-order" v-if="orderList && orderList.length > 0">
          <view v-for="(item, index) in orderList" @click="toDetail(item)" :key="index" class="mall-buy-order-item" :class="index === 0 ? '' : 'mt25 bt pt20'">
            <view class="item">
              <view class="fc3 fs24 b mr25">{{ item.getOrderStatusName }}</view>
              <view class="fc3 fs24 flex-1 onShow">{{ item.merchandiseName }}</view>
            </view>
            <view class="item mt25" v-if="item.getOrderStatus !== '2'">
              <view class="fc3 fs24 b mr25">取餐码</view>
              <view class="num">{{ item.getFoodNo }}</view>
              <view class="fc3 fs24 flex-1 onShow">{{ item.getOrderStatus === '0' ? '预计' + item.getFoodTime + '取餐' : '前往卖品柜台出示取餐码取餐' }}</view>
            </view>
          </view>
        </view>
        <view class="mall-buy" v-if="mallSet && mallSet.open">
          <view class="mall-buy-image"> </view>
          <view class="flex-1">
            <view class="fs32 b fc-white">卖品点餐</view>
            <view class="fs24 fc-white mt20">提前点单，到店领取</view>
          </view>
          <view class="mall-buy-btn" @click="toBuy">去点餐</view>
        </view>
        <view class="product-list mb20">
          <yy-section custom-class="pl30 pr30 " title="超值推荐" :right="false" font-size="30" :show-line="false" :arrow="false" v-if="goodsList.length" />
          <view class="pl10 pr10">
            <goods-item custom-class="mb20" @click-item="clickGoods(item)" v-for="(item, index) in goodsList" :key="index" :info="item" />
          </view>
        </view>
        <yy-section custom-class="plr20" title="小食商品" :right="false" font-size="30" :show-line="false" :arrow="false" v-if="listData.length" />
        <view class="plr10">
          <goods-item v-for="item in listData" :key="item.mallCommodityId" @click-item="clickGoods(item)" line-type="xs" :info="item" />
        </view>
      </view>
      <zm-mescroll-empty type="product" v-if="!listData.length && !goodsList.length" />
    </zm-mescroll-body>
  </yy-page>
</template>

<script>
  import ZmMescrollBody from '@/commons/ZmMescrollBody/index.vue'
  import listMixins from '@/mixins/newListMixin'
  import pageMixins from '@/mixins/pageMixins'
  import ZmMescrollEmpty from '@/commons/ZmMescrollEmpty/index.vue'
  import HomeSwipe from '@/components/HomeSwipe/index.vue'
  import CinemaChoose from '@/components/CinemaChoose/index.vue'
  import GoodsItem from '@/components/GoodsItem'
  import { mapGetters } from 'vuex'
  import sharePage from '@/mixins/sharePage'

  export default {
    components: {
      ZmMescrollBody,
      ZmMescrollEmpty,
      CinemaChoose,
      HomeSwipe,
      GoodsItem
    },
    mixins: [listMixins, pageMixins, sharePage],
    data() {
      return {
        downOpt: {
          textColor: '#fff',
          bgColor: 'linear-gradient(to right, #4fd2cd 0%, #42c7ff 100%)'
        },
        upOpt: {
          empty: {
            use: false // 是否显示空布局
          }
        },
        list: [],
        showCinemaChoose: true,
        search: {
          categoryId: '',
          templateId: '',
          cinemaId: ''
        },
        listType: '', // 列表样式类型：1一行一个，2一行两个
        zoneList: [],
        goodsList: [],
        orderList: [],
        mallSet: {}
      }
    },
    onLoad(op) {
      console.log(op, '123123123')
      // #ifdef MP-ALIPAY
      uni.setNavigationBarTitle({
        title: ''
      })
      // #endif
    },
    onShow() {
      const toMallBuy = uni.getStorageSync('toMallBuy')
      console.log('toMallBuy', toMallBuy)
      if (toMallBuy) {
        this.$tools.navigateTo('/pages/mall/mallBuy')
        uni.removeStorageSync('toMallBuy')
      }
      // #ifdef H5
      uni.showTabBar()
      // #endif
      this.updateCinema()
      this.getSet()
    },
    watch: {
      cityCinema: {
        handler(v) {
          if (v !== '') {
            this.refresh()
          }
        },
        deep: true
      }
    },
    computed: {
      ...mapGetters(['cityCinema'])
    },
    methods: {
      toDetail(item) {
        const query = {
          orderId: item.id,
          type: 'mall',
          title: 'detail'
        }
        this.$tools.navigateTo('/pagesOrder/order/mallBuyDetail', query)
      },
      getSet() {
        uni.$api.orderFood.getSet({ cinemaId: this.$auth.getLocCinemaInfo().cinemaId }).then((res) => {
          this.mallSet = res
        })
      },
      getOrderList() {
        if (this.$auth.getIslogin()) {
          uni.$api.orderFood
            .getOrderList({
              isUnderWay: '1',
              cinemaId: this.$auth.getLocCinemaInfo().cinemaId
            })
            .then((res) => {
              this.orderList = res
            })
        }
      },
      refresh() {
        this.init()
        this.downCallback()
      },
      updateCinema() {
        // 更新影院信息
        this.$auth.getCinemaInfo(true, 'update')
      },
      init() {
        // this.showCinemaChoose = false
        this.getDiscountFilmMallList()
        this.getSet()
        this.getOrderList()

        //Todo
        this.$nextTick(() => {
          this.$refs.homeSwipe.getDataList()
          // this.showCinemaChoose = true
        })
      },
      listLoad(params) {
        const query = {
          ...this.search,
          ...this.cityCinema
        }
        return uni.$api.mall.getDiscountFoodMallList({ ...query, ...params })
      },
      clickGoods(item) {
        // #ifdef MP-ALIPAY
        if (!my.canIUse('plugin') && !my.isIDE) {
          console.log('不可用', my.canIUse('plugin'), my.isIDE)
          my.ap && my.ap.updateAlipayClient && my.ap.updateAlipayClient() // 如果动态加载不可用则打开支付宝客户端升级界面
        } else {
          my.reLaunch({
            url: `plugin://groupPurchaseoucherPlugin/index?outItemId=${item.mallCommodityId}`
            // outItemId为外部商品id
          })
        }
        // #endif
        // #ifndef MP-ALIPAY
        this.$tools.navigateTo('/pages/goodDetail/index', {
          mallCommodityId: item.mallCommodityId,
          ...this.cityCinema
        })
        // #endif
      },
      toBuy() {
        const canBuy = this.$utils.isDuringDate(this.mallSet.startTime, this.mallSet.endTime)
        console.log('canBuy', canBuy)
        if (canBuy) {
          this.$tools.navigateTo('/pages/mall/mallBuy')
        } else {
          this.$msg.showModal({
            content: `未到点餐时间\n\n点餐时间 : ${this.mallSet.startTime}至${this.mallSet.endTime}`,
            showCancel: false,
            confirmText: '确认'
          })
        }
      },

      async getDiscountFilmMallList() {
        const query = { ...this.search, ...this.pageInfo, ...this.cityCinema }
        const res = await uni.$api.mall.getDiscountFilmMallList(query)
        this.goodsList = res.list
      }
    }
  }
</script>
<style lang="scss">
  .mall-swiper .HomeSwipe {
    height: 340rpx;
  }
</style>
<style lang="scss" scoped>
  .mall {
    // #ifdef H5
    padding-bottom: 30px;
    // #endif
    &-content {
      background: #ffffff;
      border-radius: 30rpx;
      padding-top: 30rpx;
      height: 100%;
      overflow: auto;
      // position: relative;
      // z-index: 2;
    }
    .mall-buy-order {
      margin: 20rpx 30rpx 0;
      padding: 30rpx 20rpx;
      width: calc(100% - 60rpx);
      background: #ffffff;
      border: 1rpx solid #eeeeee;
      border-radius: 14rpx;
      margin: 40rpx 30rpx;
      box-sizing: border-box;
      .mall-buy-order-item {
        display: flex;
        flex-direction: column;
        .item {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
        }
        .num {
          font-size: 36rpx;
          color: $yellow;
          font-weight: bold;
          line-height: 36rpx;
          margin-right: 20rpx;
        }
      }
    }
    .mall-buy {
      height: 140rpx;
      width: calc(100% - 60rpx);
      margin: 40rpx 30rpx;
      box-sizing: border-box;
      background: linear-gradient(135deg, #55baff 0%, #23e6d8 100%);
      border-radius: 14rpx;
      display: flex;
      align-items: center;
      padding: 0 20rpx;
      .mall-buy-image {
        background: url('https://public-oss-file.zmaxfilm.com/applet/img/film-oxygen-uniapp/mall_buy.png') no-repeat;
        background-size: 100%;
        height: 154rpx;
        margin-bottom: 14rpx;
        width: 164rpx;
      }
      .mall-buy-btn {
        width: 138rpx;
        height: 60rpx;
        border: 2rpx solid #ffffff;
        border-radius: 20rpx;
        font-size: 26rpx;
        color: #ffffff;
        line-height: 60rpx;
        text-align: center;
      }
    }
    .mall-top-box {
      padding: 30rpx;
      width: 100%;
      box-sizing: border-box;
    }

    .goods-box {
      padding-right: 20rpx;
      padding-left: 20rpx;
      width: 100%;
      box-sizing: border-box;
    }
  }
</style>
